<template>
    <div :class="[classPrefix,]">
        <div :class="`${classPrefix}__image`" :style="imageStyle">
            <img v-if="image" :src="image">
            <slot v-else name="image">
                <emtpy-image></emtpy-image>
            </slot>
        </div>
        <div :class="`${classPrefix}__description`">
            <slot v-if="$slots.description" name="description"></slot>
            <p v-else>{{description}}</p>
        </div>
        <div :class="`${classPrefix}__bottom`" v-if="$slots.default">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import Config from "/src/config";
import emtpyImage from './empty_image.vue'
    export default {
        components:{
            emtpyImage
        },
        props:{
            image:{
                type:String,
                default:''
            },
            imageSize:Number,
            description:{
                type:String,
                default:'暂无数据'
            }
        },
        data() {
            return {
                classPrefix: Config.classPrefix + "-empty",
            }
        },
        computed:{
            imageStyle(){
                return {
                    width:this.imageSize?this.imageSize+'px':''
                }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>